<template>
	<view class="policy-content">
		<image src="/static/policy/top-bg.jpg" mode="widthFix" class="top-bg"></image>
		<CustomNav :custom="custom" :title="'营商政策'" :topBgColor="topBgColor" :color="'#fff'"></CustomNav>
		<view :style="'margin-top:'+(custom.statusBar+custom.nvaMartom+custom.navHeight+20)+'rpx'" class="search-block">
			<view class="input-block">
				<view class="iconfont icon-sousuo"></view>
				<input placeholder-style="color:#efefef" placeholder="请输入关键字"/>
			</view>
		</view>
		<view class="title-block">
			<view class="title">优化营商环境</view>
			<view class="title">营商政策精准匹配</view>
		</view>
		<view class="content-block">
			<view class="tab-block">
				<view v-for="(item,index) in tab" :key="item.id" @click="tabIndex=index" :class="tabIndex==index?'selected':''" class="tab-item">{{item.value}}</view>
			</view>
			<view class="list-block">
				<navigator hover-class="none" url="/pages/policy/detail" v-for="(item,index) in list" :key="item.id" class="list-item">
					<view class="name">{{item.name}}</view>
					<view class="iconfont icon-youjiantou"></view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				custom:null,
				topBgColor:'rgba(0,0,0,0)',
				tab:[
					{id:1,value:'招商引资类'},
					{id:2,value:'财政信贷类'},
					{id:3,value:'税收类'},
					{id:4,value:'电力优惠'},
					{id:5,value:'人才引进类'},
					{id:6,value:'政府采购类'},
				],
				tabIndex:0,
				list:[
					{id:1,name:'渊泉镇人民政府关于开展档案安全检查'},
					{id:2,name:'瓜州县数字政府建设实施方案'},
					{id:3,name:'瓜州县行政审批“一网通办、一窗通办”'},
					{id:4,name:'瓜州县人民政府关于2021年第1批次建……'},
					{id:5,name:'瓜州县人民政府关于划定县级水土流失……'},
					{id:6,name:'瓜州县人民政府关于印发《关于加快推进……'},
					{id:7,name:'瓜州县人民政府关于红柳河等5条河流……'}
				]
			}
		},
		methods:{
			
		},
		onPageScroll(e) {
			if(e.scrollTop>=185){
				//this.topBgColor='linear-gradient(to right,#656ef9,#7f3ee4)'
				this.topBgColor='#086df3'
			}else{
				this.topBgColor='rgba(0,0,0,0)';
			}
		},
		onLoad(){
			this.custom=this.utils.getCustomNavData();
		}
	}
</script>

<style lang="scss" scoped> 
	.policy-content{
		overflow: hidden;
		.top-bg{
			width: 100%;
			position: absolute;
		}
		.search-block{
			position: relative;
			width: 100%;
			height: 60rpx;
			padding: 0 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.input-block{
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				border: 1px solid #fff;
				border-radius: 40rpx;
				padding:0 10rpx;
				height: 60rpx;
				.iconfont{
					flex-grow: 0;
					color: #fff;
					margin: 0 10rpx;
				}
				input{
					flex-grow: 1;
					font-size: 28rpx;
					color: #fff;
				}
			}
		}
		.title-block{
			height: 320rpx;
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			padding:0 40rpx;
			justify-content: center;
			.title{
				font-size: 44rpx;
				color: #fff;
				font-weight: bold;
				margin-bottom: 10rpx;
				letter-spacing: 4rpx;
			}
			.sub-title{
				color: #fff;
				font-size: 24rpx;
			}
		}
		.content-block{
			position: relative;
			display: flex;
			flex-direction: column;
			width: 100%;
			padding: 30rpx;
			background: #f7f7f9;
			border-radius: 30rpx 30rpx 0 0;
			.tab-block{
				display: flex;
				flex-direction: row;
				overflow-x:scroll;
				.tab-item{
					flex: none;
					border-radius: 10rpx;
					background: #fff;
					color: #000;
					font-size: 28rpx;
					padding: 12rpx 20rpx;
					margin-right: 20rpx;
					box-shadow:0 0 5px 0px #e8e8e8;
				}
				.tab-item:last-child{
					margin-right: 0;
				}
				.tab-item.selected{
					color: #fff;
					background: $uni-color-primary;
				}
			}
			.list-block{
				display: flex;
				flex-direction: column;
				margin-top: 30rpx;
				.list-item{
					background: #fff;
					box-shadow:0 0 5px 0px #e8e8e8;
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 0 30rpx;
					margin-bottom: 20rpx;
					border-radius: 14rpx;
					height: 140rpx;
					.name{
						flex-grow: 1;
						font-size: 30rpx;
						font-weight: bold;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
					.iconfont{
						flex-grow: 0;
						color: #efefef;
					}
				}
			}
		}
	}
</style>